<template>
    <div class="list-page">
        <van-nav-bar left-text="返回" title="设备列表" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <!-- <van-cell-group>
            <van-field v-model="checkTime" readonly label="盘查月份" placeholder="请选择月份" @click="handleCheckTime" />
        </van-cell-group> -->
        <van-popup v-model:show="showCheckTime" position="bottom">
            <van-datetime-picker v-model="currentDate" type="year-month" :max-date="maxDate" :min-date="minDate"
                :formatter="formatter" @confirm="timeConfirm" />
        </van-popup>
        <van-list class="list" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-loading v-if="loading" size="24px" color="#1890ff" vertical>加载中...</van-loading>
            <div v-else>
                    <van-cell class="list-item" v-for="item in equipmentTables" :key="item.id" @click="handleDaetails(item.id)">
                        <template #default>
                            <div class="blue-bar"></div>
                            <div style="padding:0 18px 18px 18px;display: flex;flex-direction: column;gap: 10px;">
                                <div><span style="font-weight: bold;font-size: 16px;">资产标签号：</span><span style="font-size: 16px;">{{ item.assetTag }}</span></div>
                                <div><span style="font-weight: bold;font-size: 16px;">资产名称：</span><span style="font-size: 16px;">{{ item.equipmentName }}</span></div>
                                <div><span style="font-weight: bold;font-size: 16px;">具体位置：</span><span style="font-size: 16px;">{{ item.specificLocation }}</span></div>
                                <div><span style="font-weight: bold;font-size: 16px;">责任人：</span><span style="font-size: 16px;">{{ item.responsiblePersonName }}</span></div>
                                <div><span style="font-weight: bold;font-size: 16px;">责任人编号：</span><span style="font-size: 16px;">{{ item.responsiblePersonId }}</span></div>
                                <div><span style="font-weight: bold;font-size: 16px;">是否盘查：</span>
                                <van-tag plain type="primary" size="large" v-if="item.status">已盘查</van-tag>
                                <van-tag plain type="danger" size="large" v-else>未盘查</van-tag>
                            </div>
                            </div>
                        </template>
                    </van-cell>
            </div>
        </van-list>
    </div>


</template>

<script setup>
import EquipmentEditApi from "../equipmentEdit/api/equipmentEdit"
import { ref,onMounted} from "vue"
import { useRouter,useRoute} from "vue-router";
import { parseTime } from "../../utils/index"

import { useStore } from 'vuex'
import _ from "lodash";
const router = useRouter();
const store=useStore()
const route =useRoute()
const loading = ref(false)
const finished = ref(false)
const pageSize = ref(10)
const pageIndex = ref(1)
const currentDate = ref(new Date())
const minDate = new Date(2024, 0, 1)
const maxDate = new Date()
const checkTime = ref(parseTime(currentDate.value, "{y}-{m}"))
const equipmentTables=ref([])
const isAdmin=store.getters.roles.includes('super_admin')
const onClickLeft = () => history.back();

onMounted(()=>{
    loading.value = true
    
})
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    } else if (type === 'month') {
        return `${value}月`
    }
    return value;
}
const handleCheckTime = () => {
    showCheckTime.value = true
}

const timeConfirm = (value) => {
    currentDate.value = parseTime(new Date(value), '{y}-{m}-{d} {h}:{i}:{s}')
    checkTime.value = currentDate.value
    showCheckTime.value = false
    getequipmentTable()
}
const getequipmentTable=()=>{
    
    EquipmentEditApi.equipmenttableByCond({locationCode:isAdmin?undefined:store.getters.locationCode,  equipmentName: route.query.name,createdTime:parseTime(currentDate.value, "{y}-{m}-{d} {h}:{i}:{s}")  }, pageSize.value, pageIndex.value).then(res=>{
        loading.value = false
        
        if (res.data.code == 200) {
            equipmentTables.value=equipmentTables.value.concat(res.data.data.list);
            if (!res.data.data.nextPage) {
                finished.value = !res.data.data.nextPage;
                return;
            }
            pageIndex.value += 1;
        }
    })
}
const handleDaetails=(id)=>{
 
    router.push({path:"/equipmentDetails",query:{id}});
}
const onLoad = _.debounce(() => {

    getequipmentTable()
}, 1000);
</script>

<style>
.list-item {
    margin: 16px 16px 0 16px;
    border-radius: 8px;
    width: auto;
}

.blue-bar {
    background: #1989fa;
    width: 4px;
    height: 16px;
    display: inline-block;
    position: absolute;
    top: 3px;
    border-radius: 5px;
}

.list-page {
    background: #ebedf0;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
</style>